<template>
  <div class="container">
    <div class="image-poster">
      <img :class="[playing ? 'play' : 'play pause', 'image']" :src="img">
      <span @click="onPlay" :class="[playing ? 'iconstop' : 'iconplayfill', 'iconfont']"></span>
    </div>
    <img class="image-tag" src="../images/music@tag.png">
    <span class="content">{{content}}</span>
  </div>
</template>

<script>
export default {
  name: 'Music',
  props: {
    img: String,
    content: String,
    src: String
  },
  data () {
    return {
      playing: false
    }
  },
  methods: {
    onPlay () {
      if (!this.playing) {
        this.playing = true
        this.$emit('audioMusic', true)
      } else {
        this.playing = false
        this.$emit('audioMusic', false)
      }
    },
    $_recoverStatus () {
      if (!this.$parent.$refs.audio.paused) {
        this.playing = false
        if (this.$parent.$refs.audio.src === this.src) {
          this.playing = true
        }
      } else {
        this.$parent.$refs.audio.src = this.src
      }
    }
  },
  mounted () {
    this.$_recoverStatus()
  }
}
</script>

<style lang="stylus" scoped>
  .container
    display: flex
    flex-direction: column
    align-items: center
    .image-poster
      width: 100%
      padding-bottom: 66.66%
      overflow: overflow
      height: 0
      display: flex
      flex-direction: column
      align-items: center
      .image
        width: 60%
        margin-top: .5rem
        border-radius: 50%
        box-shadow: 0 0 .2rem #c7c7c7
        &.play
          animation: rotate 12s linear infinite
        &.pause
          animation-play-state: paused
      .iconfont
        font-size: .5rem;
        background-color: #fff;
        padding: .25rem .25rem;
        border-radius: 50%;
        box-shadow: inset 0 0 .1rem #c7c7c7
        position: relative
        bottom: 2.7rem
    .image-tag
      align-self: flex-start
      width: .46rem
      height: 1.42rem
      position: relative
      left: .3rem
      bottom: .58rem
    .content
      font-size: .34rem
      max-width: 5.5rem
  @keyframes rotate
    0%
      transform: rotate(0deg)
    100%
      transform: rotate(360deg)
</style>
